<template>
  <div class="dataVisual-body">
    <div class="wpbox">
      <el-row :gutter="10" style="height: 9%;" class="top_header">
        <el-col :span="8" @mouseover.native="backBtnShow = true" @mouseout.native="backBtnShow = false" style="height: 100%">
          <ul style="padding-top: 38px; padding-left: 10%; width: 100%;">
            <li><a v-show="backBtnShow" href="/index">返回系统</a></li>
          </ul>
        </el-col>
        <el-col :span="8" style="text-align: center; padding-top: 16px; font-weight: bold; letter-spacing: 8px; font-size: 18px;">
          <h1>管道压力监测报警管理平台</h1>
        </el-col>
        <el-col :span="8" style="padding-top: 2%; padding-right: 2.5%; text-align: right;">
          <span :class="noticeType == 'voice' ? 'btn_active' : 'trbtn'"><a href="#" @click="noticeTypeChange('voice')">语音播报</a></span>
          <span :class="noticeType == 'notify' ? 'btn_active' : 'trbtn'"><a href="#" @click="noticeTypeChange('notify')">报警提醒</a></span>
          <span :class="noticeType == 'silence' ? 'btn_active' : 'trbtn'"><a href="#" @click="noticeTypeChange('silence')">报警静音</a></span>
          <span class="trbtn"><a href="#" @click="touchFullScreen">{{ fullscreen }}</a></span>
        </el-col>
      </el-row>
      <el-row :gutter="5" style="width: 96%; height: 100%; margin-left: 2%;">
        <el-col :span="6" style="height: 100%">
          <div class="aleftboxttop">
            <h2 class="tith2">设备报警事件统计</h2>
            <div class="lefttoday_tit" style=" height:8%">
              <!--              <p class="fl">地区：银滩花园</p>-->
              <p class="fr">时间段：{{ eventThisYearStatistics.thisMonth }}</p>
            </div>
            <div class="lefttoday_number">
              <div class="widget-inline-box text-center fl">
                <p>本日报警</p>
                <h4 class="ceeb1fd">{{ eventThisYearStatistics.todayLimitAlarmLl }}</h4>
                <p>低低限报警</p>
                <h3 class="ceeb1fd">{{ eventThisYearStatistics.monthLimitAlarmLl }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="eventThisYearStatistics.lastMonthLimitAlarmLl > 0">
                    <img v-show="eventThisYearStatistics.monthLimitAlarmLl > eventThisYearStatistics.lastMonthLimitAlarmLl" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="eventThisYearStatistics.monthLimitAlarmLl < eventThisYearStatistics.lastMonthLimitAlarmLl" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ eventThisYearStatistics.lastMonthLimitAlarmLl == 0 ? '-' : (100*(eventThisYearStatistics.monthLimitAlarmLl)/lastMonthLimitAlarmLl).toFixed(2) + '%' }}
                </h4>
              </div>
              <div class="widget-inline-box text-center fl">
                <p>本日报警</p>
                <h4 class="c24c9ff">{{ eventThisYearStatistics.todayLimitAlarmL }}</h4>
                <p>低限报警</p>
                <h3 class="c24c9ff">{{ eventThisYearStatistics.monthLimitAlarmL }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="eventThisYearStatistics.lastMonthLimitAlarmL > 0">
                    <img v-show="eventThisYearStatistics.monthLimitAlarmL > eventThisYearStatistics.lastMonthLimitAlarmL" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="eventThisYearStatistics.monthLimitAlarmL < eventThisYearStatistics.lastMonthLimitAlarmL" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ eventThisYearStatistics.lastMonthLimitAlarmL == 0 ? '-' : (100*(eventThisYearStatistics.monthLimitAlarmL)/lastMonthLimitAlarmL).toFixed(2) + '%' }}
                </h4>
              </div>
              <div class="widget-inline-box text-center fl">
                <p>本日报警</p>
                <h4 class="cffff00">{{ eventThisYearStatistics.monthLimitAlarmHh }}</h4>
                <p>高限报警</p>
                <h3 class="cffff00">{{ eventThisYearStatistics.monthLimitAlarmHh }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="eventThisYearStatistics.lastMonthLimitAlarmH > 0">
                    <img v-show="eventThisYearStatistics.monthLimitAlarmH > eventThisYearStatistics.lastMonthLimitAlarmH" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="eventThisYearStatistics.monthLimitAlarmH < eventThisYearStatistics.lastMonthLimitAlarmH" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ eventThisYearStatistics.lastMonthLimitAlarmH == 0 ? '-' : (100*(eventThisYearStatistics.monthLimitAlarmH)/lastMonthLimitAlarmH).toFixed(2) + '%' }}
                </h4>
              </div>
              <div class="widget-inline-box text-center fl">
                <p>本日报警</p>
                <h4 class="c11e2dd">{{ eventThisYearStatistics.monthLimitAlarmHh }}</h4>
                <p>高高限报警</p>
                <h3 class="c11e2dd">{{ eventThisYearStatistics.monthLimitAlarmHh }}</h3>
                <h4 class="text-muted pt6">
                  环比
                  <span v-show="eventThisYearStatistics.lastMonthLimitAlarmHh > 0">
                    <img v-show="eventThisYearStatistics.monthLimitAlarmHh > eventThisYearStatistics.lastMonthLimitAlarmHh" src="@/assets/images/visual/dataVisual/iconup.png" height="16" />
                    <img v-show="eventThisYearStatistics.monthLimitAlarmHh < eventThisYearStatistics.lastMonthLimitAlarmHh" src="@/assets/images/visual/dataVisual/icondown.png" height="16" />
                  </span>
                  {{ eventThisYearStatistics.lastMonthLimitAlarmHh == 0 ? '-' : (100*(eventThisYearStatistics.monthLimitAlarmHh)/lastMonthLimitAlarmHh).toFixed(2) + '%' }}
                </h4>
              </div>
            </div>
            <!-- lefttoday_number end -->
          </div>
          <div class="aleftboxtmidd">
<!--            <h2 class="tith2">近两月事件对比分析</h2>-->
            <h2 class="tith2">本月事件分布</h2>
            <!--<div class="lefttoday_tit height">
              <p class="fl">地区：银滩花园</p>
              <p class="fr">时间段：{{ eventThisYearStatistics.lastMonth }}至{{ eventThisYearStatistics.thisMonth }}</p>
            </div>-->
            <div id="aleftboxtbott" class="aleftboxtbott_cont"></div>
          </div>
          <div class="aleftboxtbott">
            <h2 class="tith2">设备情况统计</h2>
            <!--            <div class="lefttoday_tit height ht">-->
            <!--              <p class="fl">地区：银滩花园</p>-->
            <!--              <p class="fr">时间段：2020-06月</p>-->
            <!--            </div>-->
            <div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>
          </div>
        </el-col>
        <el-col :span="12" style="height: 100%">
          <div style="height: 100%">
            <div class="amiddboxttop">
              <h2 class="tith2" style="padding-top: 1.3%; margin-top: 3%;">设备分布</h2>
              <div id="centerMap" class="amiddboxttop_map" style="">
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="height: 100%">
          <div style="height: 100%">
            <div class="arightboxtop">
              <h2 class="tith2">最新报警</h2>
              <div class="lefttoday_tit">
                <!--                <p class="fl">地区：银滩花园</p>-->
                <p class="fr">时间段：{{ parseTime(now, '{y}-{m}-{d}') }}</p>
              </div>
              <div class="zhtc_table_title">
                <div>设备信息</div>
                <!-- 车牌 -->
                <div>报警时间</div>
                <!-- 进场时间 -->
                <div>报警值</div>
                <!-- 图片 -->
                <div>类型</div>
                <!-- 车辆类型 -->
              </div>
              <div id="zhtc_table" class="left2_table">
                <ul>
                  <li v-for="(item, i) in recentEventList" :class="i % 2 == 0 ? 'bg' : ''">
                    <div class="zhtc_table_li_content">
                      <div>
                        {{ item.sn }}
                      </div>
                      <div>{{ item.sendTime}}</div>
                      <div>{{ item.pressValue }}</div>
                      <div>{{ eventType[item.alarm] }}</div>
                    </div>
                  </li>
                </ul>
              </div>

            </div>
            <div class="arightboxbott">
              <h2 class="tith2 ">30日事件趋势</h2>
              <div class="lefttoday_tit">
                <!--                <p class="fl">地区：银滩花园</p>-->
                <p class="fr">时间段：{{ thirtyDaysTrendData.days[0] }} 至 {{ thirtyDaysTrendData.days[thirtyDaysTrendData.days.length-1] }}</p>
              </div>
              <div id="arightboxbott" class="arightboxbottcont"></div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-dialog :title="alertTitle" :visible.sync="alertDialogVisible" :modal="false" custom-class="alert_dialog" style="margin-top: 16vh; color: #FFFFFF"  width="30%" center>
        <div style="height: 25vh; text-align: center;">
          <div style="width: 100%; height: 50%; text-align: center;">
            <div :class="alertDivClass" style="position: relative; top: 0%;"></div>
            <div style="z-index: 999; position: absolute; top: 30%; font-size: 2vw; width: 90%; text-align: center;">
              {{ currentAlertData.pressValue ? parseFloat(currentAlertData.pressValue).toFixed(1) : '0' }}<span style="font-size: 1vw;">kPa</span>
            </div>
          </div>
          <el-descriptions :column="2" title="报警信息" style="background: #ffffff00; color: #FFFFFF">
            <el-descriptions-item label="设备编号">{{ currentAlertData.sn }}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{ currentAlertData.client ? currentAlertData.client.deviceName : '' }}</el-descriptions-item>
            <el-descriptions-item label="管理人员">{{ currentAlertData.client ? currentAlertData.client.nickName : '' }}</el-descriptions-item>
            <el-descriptions-item label="报警时间">{{ parseTime(currentAlertData.sendTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
            <el-descriptions-item label="所在位置">{{ currentAlertData.client ? currentAlertData.client.address : '' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="alertDialogVisible = false">取 消</el-button>
          <el-button @click="alertDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <div hidden="hidden">
      <button class="butt" @click="auditPlay"></button>
      <audio ref="audio" class="aud">
        <source src="@/assets/audio/quake_alert.mp3" />
      </audio>
    </div>
  </div>
</template>

<style>
.el-descriptions__body{
  background: #FFFFFF00;
  color: #FFFFFF;
}
</style>

<script>
import '@/assets/styles/visual/dataVisual.css'
import echarts from 'echarts'
import { dataVisual, thirtyDaysEventTrend } from "@/api/device/pressureSensorStatistics";
import screenfull from "screenfull";

export default {
  name: "PressureSensorStatistics",
  data() {
    return {
      backBtnShow: false,
      alertDivClass: 'alert_img alert_img_Ii',
      alertTitle: "报警",
      alertDialogVisible: false,
      currentAlertData: {},
      noticeType: 'voice',
      now: new Date(),
      eventType: {
        '1': '低低',
        '2': '低',
        '3': '高',
        '4': '高高'
      },
      onlineIcon: require('@/assets/images/visual/dataVisual/device-online.png'),
      offlineIcon: require('@/assets/images/visual/dataVisual/device-offline.png'),
      dormancyIcon: require('@/assets/images/visual/dataVisual/device-dormancy.png'),
      map: null,
      clientMarkerMap: null,
      baiduMapInfoWindow: null,
      clientList: [],
      clientStat: {
        onlineCount: 0,
        offlineCount: 0,
        dormancy: 0,
      },
      recentEventList: [],
      eventThisYearStatistics: {
        thisMonth: '####年##月',
        lastMonth: '####年##月',
        todayLimitAlarmLl: 0,
        todayLimitAlarmL: 0,
        todayLimitAlarmH: 0,
        todayLimitAlarmHh: 0,
        monthLimitAlarmLl: 0,
        monthLimitAlarmL: 0,
        monthLimitAlarmH: 0,
        monthLimitAlarmHh: 0,
        lastMonthLimitAlarmLl: 0,
        lastMonthLimitAlarmL: 0,
        lastMonthLimitAlarmH: 0,
        lastMonthLimitAlarmHh: 0,
        yearLimitAlarmLl: 0,
        yearLimitAlarmL: 0,
        yearLimitAlarmH: 0,
        yearLimitAlarmHh: 0
      },
      thirtyDaysTrendData: {
        days: [],
        LimitAlarmLlList: [],
        LimitAlarmLList: [],
        LimitAlarmHList: [],
        LimitAlarmHhList: []
      },
      deviceStatisticsChart: null,
      recentTwoMonthStatChart: null,
      deviceStatisticsChartOption: null,
      recentTwoMonthStatChartOption: null,
      thirtyDaysTrendChart: null,
      thirtyDaysTrendChartOption: null,
      monthDataChart: null,
      monthDataChartOption: null,
      fullscreen: '全屏显示'
    };
  },
  created() {
    this.$nextTick(() => {
      this.initCharts();
      this.getDataVisual()
      this.getThirtyDaysEventTrend()
      this.initCenterMap();
      this.$store.dispatch('websocketSubscribe', {'topic': 'pressureSensorEventMsg'})
      this.$store.dispatch('wsAddCallback', {'topic': 'pressureSensorEventMsg',  'cb': this.wsOnMessage});
    })
  },
  mounted: function () {
    const that = this;
    this.$nextTick(() => {
      window.addEventListener('resize',function(){
        // 重新定义charts
        that.deviceStatisticsChart.resize();
        that.recentTwoMonthStatChart.resize();
        that.thirtyDaysTrendChart.resize();
        that.monthDataChart.resize();
      })
    })
  },
  destroyed() {
    this.$store.dispatch('wsRemoveCallback', {'topic': 'pressureSensorEventMsg',  'cb': _this.wsOnMessage});
  },
  methods: {
    touchFullScreen(){
      if(this.fullscreen == '全屏显示'){
        this.fullscreen = '取消全屏';
      }else{
        this.fullscreen = '全屏显示';
      }
      screenfull.toggle()
    },
    wsOnMessage(msg){
      console.log("收到回调消息：", msg)
      if(msg.topic == 'pressureSensorEventMsg'){
        let data = msg.data;
        let eventType = data.alarm;
        console.log(msg.data)
        if(eventType == 1 || eventType == 2){
          this.alertTitle = this.eventType[eventType] + " 报警";
          this.alertDivClass = 'alert_img alert_img_Ii';
        }else{
          this.alertTitle = this.eventType[eventType] + " 报警";
          this.alertDivClass = 'alert_img alert_img_position';
        }
        /*this.auditPlay();*/
        this.currentAlertData = data;
        this.alertDialogVisible = true;
      }
    },
    auditPlay(){
      if(this.noticeType == 'voice'){
        let music1 = new Audio();
        if(this.currentAlertData.eventType == 'Ii'){
          music1 = require("@/assets/audio/quake_alert.mp3");
        }else if(this.currentAlertData.eventType == 'position'){
          music1 = require("@/assets/audio/position_alert.mp3");
        }else if(this.currentAlertData.eventType == 'angle'){
          music1 = require("@/assets/audio/angle_alert.mp3");
        }
        this.$refs.audio.src = music1;
        this.$refs.audio.play();
      }else if(this.noticeType == 'notify'){
        let music1 = new Audio();
        music1 = require("@/assets/audio/warning.mp3");
        this.$refs.audio.src = music1;
        this.$refs.audio.play();
      }
    },
    noticeTypeChange(noticeType){
      this.noticeType = noticeType;
    },
    parseEventType(vals){
      let result = "";
      if(vals){
        let valArr = vals.split(',');
        for(let i in valArr){
          result = result == '' ? result + this.eventType[valArr[i]] : result + "," + this.eventType[valArr[i]];
        }
      }
      return result;
    },
    getDataVisual(){
      dataVisual().then(response => {
        this.clientList = response.data.pressureSensorClientList;
        this.recentEventList = response.data.pressureSensorEventList;
        this.eventThisYearStatistics = response.data.pressureSensorEventThisYearStatistics;
        // this.initRecentTwoMonthStat();
        this.initMonthDataChartData();
        this.initClientMarkers();
      });
    },
    getThirtyDaysEventTrend(){
      thirtyDaysEventTrend().then(response => {
        this.thirtyDaysTrendData = response.data;
        this.initThirtyDaysEventTrend();
      });
    },
    initCenterMap(){
      let _this = this;
      _this.map = new BMapGL.Map("centerMap");
      _this.map.addControl(new BMapGL.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_EARTH_MAP]}));          //2D图，卫星图
      // let point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
      //    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
      _this.map.centerAndZoom(new BMapGL.Point(120.282737,36.192915), 11);// 初始化地图，设置中心点坐标和地图级别，全国地图
      _this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      // _this.map.setMapStyleV2({ styleJson: _this.baiduMapStyle() });
      // _this.map.setMapType(BMAP_EARTH_MAP);
    },
    initClientMarkers(){
      let _this = this;
      let clientList = this.clientList;
      _this.map.clearOverlays();
      _this.clientMarkerMap = {};
      _this.clientStat = {
        onlineCount: 0,
        offlineCount: 0,
        dormancyCount: 0
      }
      for(let i in clientList){
        let client = clientList[i];
        _this.addMapMarker(client);
        if(client.clientStat == 'online'){
          _this.clientStat.onlineCount ++;
        }else{
          _this.clientStat.offlineCount ++;
        }
      }
      this.initDeviceStatistics();
    },
    addMapMarker(client){
      let _this = this;
      // 创建设备图标
      let pic = client.clientStat == 'online' ? _this.onlineIcon : client.clientStat == 'dormancy' ? _this.dormancyIcon : _this.offlineIcon;
      // 创建Marker标注，使用设备图标
      let longitude = client.longitude;
      let latitude = client.latitude;
      let pt = new BMapGL.Point(longitude, latitude);
      let myIcon = new BMapGL.Icon(pic, new BMapGL.Size(40, 40));
      // myIcon.setImageOffset(new BMapGL.Size(15, 20));
      let marker = new BMapGL.Marker(pt, {
        icon: myIcon
      });
      // 将标注添加到地图
      _this.map.addOverlay(marker);
      marker.addEventListener("click", function(){
        let opts = {
          width : 200,     // 信息窗口宽度
          height: 100,     // 信息窗口高度
          title : client.deviceName , // 信息窗口标题
          message: client.deviceName
        }
        if(_this.baiduMapInfoWindow){
          _this.baiduMapInfoWindow.close();
        }
        let text = "设备地址：" + client.address + "</br>" + "经纬度：" + client.longitude + "," + client.latitude + "</br>" + "设备编号：" + client.sn;
        _this.baiduMapInfoWindow = new BMapGL.InfoWindow(text, opts);  // 创建信息窗口对象
        _this.map.openInfoWindow(_this.baiduMapInfoWindow, pt);// 打开信息窗口
        _this.map.centerAndZoom(marker.getPosition(), 11);
      });
      _this.clientMarkerMap[client.sn] = marker;
    },
    initCharts(){
      this.deviceStatisticsChart = echarts.init(document.getElementById('aleftboxtmidd'));
      // this.recentTwoMonthStatChart = echarts.init(document.getElementById('aleftboxtbott'));
      this.monthDataChart = echarts.init(document.getElementById('aleftboxtbott'));
      this.thirtyDaysTrendChart = echarts.init(document.getElementById('arightboxbott'));
    },
    initDeviceStatistics(){
      let _this = this;
      _this.deviceStatisticsChartOption = {
        backgroundColor: 'rgba(1,202,217,.2)',
        legend:{
          orient: 'vertical', // 'vertical'
          x: 'left', // 'center' | 'left' | {number},
          y: '80', // 'center' | 'bottom' | {number}
          padding: 10,    // [5, 10, 15, 20]
          itemGap: 20,
          textStyle: {color: '#c3cad9'},
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)"
        },
        visualMap: {
          show: false,
          min: 500,
          max: 600,
          inRange: {
            //colorLightness: [0, 1]
          }
        },
        series: [{
          name: '在线状态',
          type: 'pie',
          radius: '50%',
          selectedMode: 'single',
          selectedOffset: 10,
          clockwise: true,
          center: ['50%', '50%'],
          color: ['#33ff99', '#43cadd', '#ff6464'], //'#FBFE27','rgb(11,228,96)','#FE5050'
          data: [{
            value: _this.clientStat.onlineCount,
            name: '在线',
          },{
            value: _this.clientStat.offlineCount,
            name: '离线',
          },
            {
              value: _this.clientStat.dormancyCount,
              name: '休眠'
            }
          ].sort(function(a, b) {
            return a.value - b.value
          }),
          roseType: 'radius',
          label: {
            normal: {
              // formatter: ['{c|{b}{d}%}', '{b|{b}}'].join('\n'),
              formatter: ['{b|{b}{d}%}', '{c|{c}台}'].join('\n'),
              rich: {
                b: {
                  color: '#d9efff',
                  fontSize: 15,
                  height: 40
                },
                c: {
                  color: '#fff',
                  fontSize: 14,
                  fontWeight:'bold',
                  lineHeight: 5
                },
              },
            }
          },
          labelLine: {
            normal: {
              backgroundColor:'yellow',
              borderColor:'skyblue',
              borderWidth:10,
              lineStyle: {
                borderColor:'skyblue',
                borderWidth:10,
                backgroundColor:'yellow',
              }
            },
          }
        }]
      };
      _this.deviceStatisticsChart.setOption(_this.deviceStatisticsChartOption);
    },
    initRecentTwoMonthStat(){
      let _this = this;
      _this.recentTwoMonthStatChartOption = {
        color: ['#7ecef4'],
        backgroundColor: 'rgba(1,202,217,.2)',
        legend: {
          right: 10,
          top: 5,
          textStyle: {
            fontSize: 10,
            color: 'rgba(255,255,255,.6)'
          },
          data: [ _this.eventThisYearStatistics.lastMonth, _this.eventThisYearStatistics.thisMonth ]
        },
        grid: {
          left: 20,
          right: 20,
          top: 30,
          bottom: 2,
          containLabel: true
        },

        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0)'
            }
          },
          axisLabel: {
            color: "rgba(255,255,255,0)"
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',

          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.5)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            color: "rgba(255,255,255,.5)"
          },
          data: ['高高', '高', '低低', '低']
        },
        series: [{
          name: _this.eventThisYearStatistics.lastMonth,
          type: 'bar',
          barWidth: 15,
          label: {
            show: true,
            position: 'inside'
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                1, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(77,114,217,.7)'
                }, {
                  offset: 1,
                  color: 'rgba(117,72,159,.7)'
                }]
              )
            }
          },
          data: [ _this.eventThisYearStatistics.lastMonthLimitAlarmHh, _this.eventThisYearStatistics.lastMonthLimitAlarmH, _this.eventThisYearStatistics.lastMonthLimitAlarmLl, _this.eventThisYearStatistics.lastMonthLimitAlarmL ]
        }, {
          name: _this.eventThisYearStatistics.thisMonth,
          type: 'bar',
          barWidth: 15,
          label: {
            show: true,
            position: 'inside'
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                1, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(230,253,139,.7)'
                }, {
                  offset: 1,
                  color: 'rgba(41,220,205,.7)'
                }]
              )
            }
          },
          data: [ _this.eventThisYearStatistics.monthLimitAlarmHh, _this.eventThisYearStatistics.monthLimitAlarmH, _this.eventThisYearStatistics.monthLimitAlarmLl, _this.eventThisYearStatistics.monthLimitAlarmL ]
        }]
      };
      _this.recentTwoMonthStatChart.setOption(_this.recentTwoMonthStatChartOption);
    },
    initMonthDataChartData(){
      let _this = this;
      let xData = ['低低','低','高','高高']
      let echartData = ['2867','1543','2165','565']
      _this.monthDataChartOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff"
            }

          },
        },
        grid: {
          left: 50,
          right: 30,
          top: 50,
          bottom: 20,
          textStyle: {
            color: "#fff"
          }
        },
        calculable: true,
        xAxis: [{
          type: "category",
          axisLine: {
            lineStyle: {
              color: 'rgba(193, 207, 220, 1)',
              width: 1
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 10,
            color: "#FFFFFF",
          },
          splitLine: {
            "show": false
          },
          splitArea: {
            "show": false
          },
          data: xData,
        }],
        yAxis: [{
          type: 'value',
          minInterval: 1000,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            fontSize: 10,
            color: "#FFFFFF",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(193, 207, 220, 1)',
              // type: 'dashed'
            }
          },
        }],
        series: [{
          name: "分布情况",
          type: "bar",
          barMaxWidth: 18,
          barGap: "10%",
          itemStyle: {
            normal: {
              color: (params) => {
                let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(250,134,117)',
                },
                  {
                    offset: 1,
                    color: 'rgb(255,3,0)',
                  },
                ]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(252,245,133)',
                },
                  {
                    offset: 1,
                    color: 'rgb(255,243,0)',
                  },
                ]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(252,245,133)',
                },
                  {
                    offset: 1,
                    color: 'rgb(255,243,0)',
                  },
                ]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(250,134,117)',
                },
                  {
                    offset: 1,
                    color: 'rgb(255,3,0)',
                  },
                ])]
                return colors[params.dataIndex]
              },
              barBorderRadius: [20, 20, 0, 0] //圆角大小
            },
          },
          label: {
            normal: {
              show: true,
              position: "top",
              formatter: function(data) {
                return '{a'+data.dataIndex+'|' + data.data + '}';

              },
              rich: {
                a0: {
                  color: 'rgba(220, 85, 69, 1)',
                  fontSize: 12,
                  fontFamily: 'DIN',
                  fontWeight: 'bold'
                },
                a1: {
                  color: 'rgba(252,245,133, 1)',
                  fontSize: 12,
                  fontFamily: 'DIN',
                  fontWeight: 'bold'
                },
                a2: {
                  color: 'rgba(252,245,133, 1)',
                  fontSize: 12,
                  fontFamily: 'DIN',
                  fontWeight: 'bold'
                },
                a3: {
                  color: 'rgba(220, 85, 69, 1)',
                  fontSize: 12,
                  fontFamily: 'DIN',
                  fontWeight: 'bold'
                }
              }
            },
          },
          data: echartData,
        }
        ]
      }
      _this.monthDataChart.setOption(_this.monthDataChartOption);
    },
    initThirtyDaysEventTrend(){
      let _this = this;
      _this.thirtyDaysTrendChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: {
            fontSize: 10,
            color: 'rgba(255,255,255,.8)'
          },
          data: ['低低', '低','高','高高']
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: _this.thirtyDaysTrendData.days,
            axisLabel: {
              color: "#FFFFFF",
              fontSize: 10,
              interval: 'auto', // x轴间距
              // rotate:40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '事件数',
            axisLabel: {
              show: true,
              fontSize: 10,
              color: "#FFFFFF",
            },
            nameTextStyle: {
              color: '#ffffff',
            }
          }
        ],
        series: [
          {
            name: '低低',
            type: 'bar',
            data: _this.thirtyDaysTrendData.LimitAlarmLlList,
            itemStyle: {
              normal: {
                color: '#ff0000'
              }
            }
          },
          {
            name: '低',
            type: 'bar',
            data: _this.thirtyDaysTrendData.LimitAlarmLList,
            itemStyle: {
              normal: {
                color: '#ffdd00'
              }
            }
          },
          {
            name: '高',
            type: 'bar',
            data: _this.thirtyDaysTrendData.LimitAlarmHList,
            itemStyle: {
              normal: {
                color: '#ffdd00'
              }
            }
          },
          {
            name: '高高',
            type: 'bar',
            data: _this.thirtyDaysTrendData.LimitAlarmHhList,
            itemStyle: {
              normal: {
                color: '#ff0000'
              }
            }
          }
        ]
      };
      _this.thirtyDaysTrendChart.setOption(_this.thirtyDaysTrendChartOption)
    },
  }
};
</script>
